<template>
	<view class="myinvest">
		<view class="uni-list" v-if="list.length">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="header">
					<view class="title">
						<view class="left">
							<text>订单编号：{{value.orderNumber}}</text>
						</view>
						
						<!-- <view class="right" v-if=" ! value.offlinePay ">
							<view v-if='value.profit'>
								收益:{{value.profit}}元
							</view>
							<view v-if='!value.profit'>
								等待收益发放
							</view>
						</view> -->
						<view class="right">
							<view v-if="value.orderStatus.value ==='init'">
								待支付
							</view>
							<view v-if="value.orderStatus.value ==='paid'">
								等待收益发放
							</view>
							<view class="expirationTime" v-if="value.orderStatus.value ==='tailConfirm'">
								<view class="red" >{{value.expirationTime}}</view>
							</view>
							<view class="expirationTime" v-if="value.orderStatus.value =='expiredTailConfirm'">
								<text class="red">已过期</text>
							</view>
							<view class="expirationTime" v-if="value.orderStatus.value =='finish'">
								<text class="red" v-if='value.profit>0'>收益: +{{value.profit}}元</text>
								<text class="blue" v-if='value.profit<0'>收益: {{value.profit}}元</text>
								<text v-if='value.profit===0'>收益: {{value.profit}}元</text>
							</view>
							<view class="expirationTime" v-if="value.orderStatus.value =='delivery'">
								<text class="gray">等待收益发放</text>
							</view>
							
						</view>
						
					</view>
				</view>
				<view class="uni-media-list"  @click="goDetail(value)">
					<image class="uni-media-list-logo" :src="value.movieCoverImage" mode="aspectFill"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.movieTitle}}</view>
						<view class="progress">{{value.movieReleaseStatus.text}}</view>
						<view class="time">{{value.createTime}}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{value.number}}份</text>
							<text>￥{{value.orderMoney_format}}</text>
						</view>
					</view>
				</view>
				<view class="footer" v-if="value.orderStatus.value ==='tailConfirm'">
					<view class="footerWrap">
						<view class="left">
							待付尾款: <text class="red"> {{value.balanceMoney}}元</text>
						</view>
						<view class="contact red" @click="call">
							联系客服
						</view>
					</view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
<view class="uni-loadmore loadfinished" v-if="finished">- 没有更多订单了 -</view>
		</view>
		<view class="nodata" v-if="nodata">
			<text>暂无投资...</text>
		</view>
	</view>
</template>

<script>
var util = require('../../common/util.js');
export default {
    data() {
        return {
            reload: false,
            phoneNumber: '',
            tailConfirmHour: 0,
            loading: false,
            finished: false,
            loadMoreText: '加载中...',
            showLoadMore: false,
            params: {
                start: 0,
                limit: 10,
                token: util.getUserToken()
            },
            nodata: false,
            list: []
        };
    },
    onLoad(e) {
        this.globalRuleGet();
        this.phoneNumber = e.phone;
    },

    onReachBottom() {
        console.log('onReachBottom');
        if (!this.finished) {
            this.showLoadMore = true;
            setTimeout(() => {
                this.params.start += this.params.limit;
                this.globalRuleGet();
            }, 300);
        }
    },
    onUnload() {
        this.list = [];
        this.showLoadMore = false;
    },
    onPullDownRefresh() {
        this.params.start = 0;
        this.globalRuleGet();
        this.finished = false;
    },
    methods: {
        globalRuleGet() {
            util.ajax(
                'globalRuleGet',
                {
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        // console.log(json.data.rule.tailConfirmHour);
                        this.tailConfirmHour = json.data.rule.tailConfirmHour;
                        this.getList();
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        getCountDown(timer) {
            let countTime;
            let nowTimer = new Date().getTime();
            let endTimer = new Date(timer * 1000).getTime();
            let t = endTimer - nowTimer;
            //let d = Math.floor(t / 1000 / 60 / 60 / 24);
            let hour = Math.floor(t / 1000 / 60 / 60);
            let min = Math.floor((t / 1000 / 60) % 60);
            let second = Math.floor((t / 1000) % 60);

            if (hour < 10) {
                hour = '0' + hour;
            }
            if (min < 10) {
                min = '0' + min;
            }
            if (second < 10) {
                second = '0' + second;
            }
            countTime = hour + ':' + min + ':' + second;
            return countTime;
        },
        setIntervalTimer() {
            if (this.timerInterval) clearInterval(this.timerInterval);
            this.timerInterval = setInterval(() => {
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].orderStatus.value === 'tailConfirm') {
                        this.list[i].expirationTime =
                            this.getCountDown(this.list[i].expiredTime) + '内支付尾款';
                        // console.log(this.list[i].expirationTime);
                    }
                }
            }, 1000);
            console.log(this.list);
        },
        formatTime(time) {
            return util.parseTime(time);
        },
        getList() {
            //             uni.showLoading({
            //                 title: '正在加载...'
            //             });
            this.loading = true;
            util.ajax(
                'orders',
                this.params,
                data => {
                    // uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        uni.stopPullDownRefresh();
                        if (0 == this.params.start) {
                            this.list = [];
                        }
                        // console.log(json.data);
                        for (let i = 0; i < json.data.length; i++) {
                            json.data[i].expiredTime =
                                json.data[i].createTime + this.tailConfirmHour * 60;
                            json.data[i].expirationTime =
                                this.getCountDown(json.data[i].expiredTime) + '内支付尾款';
                            json.data[i].createTime = this.formatTime(json.data[i].createTime);
                            json.data[i].balanceMoney = util.showDecimal(
                                json.data[i].priceOfUnit * json.data[i].number -
                                    json.data[i].deposit
                            );
                            json.data[i].orderMoney = util.showDecimal(
                                json.data[i].priceOfUnit * json.data[i].number
                            );
							json.data[i].orderMoney_format = util.fmoney(json.data[i].orderMoney);
                            json.data[i].priceOfUnit = util.showDecimal(json.data[i].priceOfUnit);
							if(json.data[i].profit){
								json.data[i].profit = util.showDecimal(json.data[i].profit);
							}

                            this.list.push(json.data[i]);
                        }

                        this.setIntervalTimer();

                        // console.log(this.list);

                        if (this.list.length === 0) {
                            this.nodata = true; //无数据
                        } else {
                            this.nodata = false;
                        }
                        // 加载状态结束
                        this.loading = false;
                        if (json.data.length < this.params.limit) {
                            this.finished = true;
                            this.showLoadMore = false;
                        }
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.phoneNumber
            });
        },
        goDetail: function(e) {
            if (e.orderStatus.value === 'init') {
                util.ajax(
                    'movieDetail',
                    {
                        movieId: e.movieId,
                        token: util.getUserToken()
                    },
                    data => {
                        let json = data.data;
                        if (json.status) {
                            let userLimit = json.data.info.userLimit;
                            let surplusNum =
                                (json.data.totalOfMoney - json.salesOfMoney) /
                                json.data.info.priceOfUnit;
                            let priceOfUnit = json.data.info.priceOfUnit / 100;
                            let deposit = util.showDecimal(json.data.info.deposit);

                            uni.navigateTo({
                                url:
                                    '../project/offerToBuy?price=' +
                                    priceOfUnit +
                                    '&userLimit=' +
                                    userLimit +
                                    '&deposit=' +
                                    deposit +
                                    '&movieId=' +
                                    e.movieId +
                                    '&surplusNum=' +
                                    surplusNum +
                                    '&buyNum=' +
                                    e.number
                            });
                        } else {
                            uni.showToast({
                                title: json.message,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    },
                    (data, code) => {
                        console.log(data);
                        uni.showToast({
                            title: JSON.stringify(data.message),
                            icon: 'none',
                            duration: 1000
                        });
                    }
                );
            } else {
                uni.navigateTo({
                    // url: "./myinvestDetail?detailDate=" + JSON.stringify(detail)
                    url: './myinvestDetail?id=' + e.orderId
                });
            }
        }
    }
};
</script>

<style lang="less">
@import '../../common/uni.css';
.red {
    color: #ff1268;
}
.blue {
    color: blue;
}
.loadfinished {
    padding: 30upx 0;
    color: #CCCCCC;
}
.uni-navbar-container {
    justify-content: center;
}
.uni-loadmore {
    justify-content: center;
    align-items: center;
	background: white;
}
.uni-list-cell:after {
    background-color: white;
}

.myinvest {
    width: 100%;
	
    .nodata {
        width: 100%;
        margin-top: 500upx;
        justify-content: center;
        color: #cccccc;
    }
    .uni-list {
        background: #F5F5F5;
        .uni-list-cell {
            flex-direction: column;
            width: 100%;
            margin-top: 30upx;
            background: white;
            .header {
                padding: 0 30upx;
                box-sizing: border-box;
                width: 100%;

                .title {
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: 88upx;
                    font-size: 24upx;
                    color: #888888;
                    border-bottom: 1px solid #eeeeee;
                    .right {
                        color: #000000;
                    }
                }
            }
            .uni-media-list {
                padding: 46upx 36upx;

                .uni-media-list-logo {
                    width: 180upx;
                    height: 240upx;
                    border-radius: 6upx;
                    margin-right: 20upx;
                }

                .uni-media-list-body {
                    height: auto;
                    // justify-content: space-around;
                    .uni-media-list-text-top {
                        font-size: 32upx;
                        color: #000000;
                        overflow: hidden;
                        font-weight: 600;
                    }
                    .progress {
                        background: #ff1268;
                        color: white;
                        border-radius: 50upx;
                        padding: 8upx 16upx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 26upx;
                        margin: 30upx 0 40upx;
                    }
                    .time {
                        color: #222222;
                        font-size: 24upx;
                        margin-bottom: 38upx;
                    }

                    .uni-media-list-text-bottom {
                        flex-direction: row;
                        justify-content: space-between;
                        color: #222222;
                        font-size: 30upx;
                        text:last-child {
                            font-size: 28upx;
                        }
                    }
                }
            }

            .footer {
                width: 100%;
                padding: 0 30upx;

                box-sizing: border-box;

                .footerWrap {
                    height: 88upx;
                    width: 100%;
                    border-top: 1px solid #eeeeee;
                    justify-content: flex-end;
                    align-items: center;
					.left{
						.red{
							margin-left: 10upx;
						}
					}
                    .contact {
                        border: 1px solid #ff1268;
                        border-radius: 50upx;
                        margin-left: 30upx;
                        padding: 10upx 18upx;
                    }
                }
            }
        }
    }
}
</style>
